<template>
  <view class="popover">
    <view
      v-if="show"
      class="popover-overlay"
      @click="togglePopover"
    ></view>
    <view
      class="popover-trigger"
      @click="togglePopover"
    >
      <view class="popover-trigger-btn"></view>
    </view>

    <view
      v-show="show"
      class="popover-body"
    >
      <slot />
    </view>
  </view>
</template>

<script>
  export default {
    name: "popover",
    data() {
      return {
        show: false,
      };
    },
    mounted() {},
    methods: {
      // 获取父元素实例
      togglePopover(e) {
        e.stopPropagation();
        this.show = !this.show;
      },
    },
  };
</script>

<style lang="scss">
  @keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
      opacity: 0;
      transform: translate3d(200rpx, -50%, 0) scaleX(3);
    }

    60% {
      opacity: 1;
      transform: translate3d(-50rpx, -50%, 0) scaleX(1);
    }

    75% {
      transform: translate3d(20rpx, -50%, 0) scaleX(0.98);
    }

    90% {
      transform: translate3d(-10rpx, -50%, 0) scaleX(0.995);
    }

    to {
      transform: translate3d(-10rpx, -50%, 0);
    }
  }

  .popover {
    display: inline-flex;
    align-items: center;
    position: relative;

    &-overlay {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0);
    }

    &-trigger {
      position: relative;
      z-index: 2;
      &-btn {
        display: block;
        width: 48rpx;
        height: 28rpx;
        background-color: #2e323a;
        border-radius: 10rpx;
        position: relative;
        &::after,
        &::before {
          content: "";
          position: absolute;
          display: block;
          width: 10rpx;
          height: 10rpx;
          background-color: rgba($color: #ffffff, $alpha: 0.6);
          top: 50%;
          transform: translateY(-50%);
          border-radius: 50%;
        }

        &::before {
          left: 10rpx;
        }

        &::after {
          right: 10rpx;
        }
      }
    }

    &-body {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: calc(100% + 10rpx);
      z-index: 1;
      width: auto;
      display: flex;
      align-items: center;
      background-color: #2e323a;
      border-radius: 8rpx;
      box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
      padding: 10rpx 20rpx;
      animation: bounceInRight 0.8s;
    }
  }
</style>
